<script setup lang="ts">
    import { useWindowStore } from "@renderer/store"
    // import { useIpcRenderer } from "@vueuse/electron"
    const windowStore = useWindowStore();
    // const { closeDeployWindow } = windowStore;
    // const ipcRenderer = useIpcRenderer();

    // 关闭窗口
    const closeWin = ()=>{
        window.electron.ipcRenderer.send('window-close',"DEPLOY")
        // closeDeployWindow()
        // console.log(ipcRenderer)
    }
</script>

<template>
    <div class="norem-deploy">
        <div class="title">
            <span class="txt">系统配置</span>
            <p class="drag"></p>
            <span class="close" @click="closeWin"><el-icon size="18px" color="#FFFFFF"><Close /></el-icon></span>
        </div>
        <div class="content">
            <div class="item">
                <span class="txt">下载地址</span>
                <input class="input" type="text" placeholder="请输入下载地址">
            </div>
            <div class="item ipts">
                <div class="ipt location">
                    <span class="txt">服务地址</span>
                    <input class="input " type="text" placeholder="服务地址">
                </div>
                <div class="ipt">
                    <span class="txt">端口号</span>
                    <input class="input number" type="text" placeholder="端口号">
                </div>
            </div>
            <div class="butt">
                <p class="confirm"><span>确定</span></p>
                <p class="cancel"><span>取消</span></p>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .norem-deploy {
        display: flex;
        flex-direction: column;
        height: 100%;
        // overflow: hidden;
        .title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            // background-color: red;
            box-sizing: border-box;
            padding: 0 15px;
            flex-shrink: 0;
            // background-color: red;

            .txt{
                color: #FFFFFF;
                font-size: 16px;
                font-weight: 600;
            }
            .drag{
                flex: 1;
                height: 100%;
                -webkit-app-region: drag;
            }
            .close{
                width: 20px;
                height: 20px;
                display: flex;
                // background-color: red;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                border-radius: 5px;
                &:hover{
                    background-color: rgba(255,255,255,.1);
                }
            }
        }
        .content{
            flex: 1;
            height: 0;
            overflow: auto;
            border: 1px solid rgb(51, 51, 51);
            box-sizing: border-box;
            background-color: rgb(34, 34, 34);
            padding-top: 30px;
            padding-left: 30px;
            padding-right: 30px;
            display: flex;
            flex-direction: column;
            .item{
                display: flex;
                align-items: center;
                margin-bottom: 20px;
                .txt{
                    color: #FFFFFF;
                    font-size: 16px;
                    // width: 100px;
                    margin-right: 10px;
                }
                .input{
                    flex: 1;
                    background-color: rgba(255, 255, 255, .1);
                    border: none;
                    outline: none;
                    border-radius: 5px;
                    color: #FFFFFF;
                    padding-left: 15px;
                    box-sizing: border-box;
                    height: 35px;
                }
            }
            .ipts{
                gap: 20px;
                display: flex;
                justify-content: space-between;
                .txt{
                    flex-shrink: 0;
                }
                .ipt{
                    display: flex;
                    align-items: center;
                    flex-shrink: 0;
                    
                    .number{
                        width: 120px;
                    }
                }
                .location{
                    flex: 1;
                }
                
            }
            .butt{
                display: flex;
                justify-content: center;
                padding-top: 10px;
                gap: 40px;
                padding-left: 20px;
                box-sizing: border-box;
                p{
                    border-radius: 999px;
                    height: 40px;
                    width: 130px;
                    color: #FFFFFF;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    // padding: 0 30px;
                    font-size: 14px;
                    cursor: pointer;
                }
                .confirm{
                    background-color: #3a8ee6;
                    &:hover{
                        background-color: #409eff;
                    }
                }
                .cancel{
                    background-color: rgb(90, 90, 90);
                    &:hover{
                        background-color: #666666;
                    }
                }
                // .confirm{
                //     width: 100px;
                //     height: 35px;
                //     background-color: #409eff;
                //     border-radius: 5px;
                //     color: #FFFFFF;
                //     font-size: 16px;
                //     cursor: pointer;
                //     &:hover{
                //         background-color: #3a8ee6;
                //     }
                //  }
                // .cancel{
                //     width: 100px;
                //     height: 35px;
                //     background-color: #FFFFFF;
                //     border: 1px solid #409eff;
                //     border-radius: 5px;
                //     color: #409eff;
                //     font-size: 16px;
                //     cursor: pointer;
                //     margin-left: 20px;
                //     &:hover{
                //         background-color: #409eff;
                //         color: #FFFFFF;
                //     }
                // }
            }
        }
    }
</style>